<template>
  <div style="border:1px solid #ccc;margin:1em;padding:1em">
    <h1>根组件 {{money}} </h1>
    <button @click="money=1000">发钱</button>
    <hr>
    <Son />
  </div>
</template>
<script>
import { provide, ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'App',
  components: {
    Son
  },
  setup () {
    const money = ref(100)
    const addMoney = (n=1) => {
        console.log('n', n)
        money.value += n
    }
    // 将数据提供给后代组件 provide
    provide('money', money)
    provide('car', 'OOOO')
    provide('addMoney', addMoney)


    return { money }
  }
}
</script>
<style scoped lang="less"></style>
